<template>
  <div class="">
    <el-select
      v-model="scholarship"
      placeholder="请选择奖学金类型"
      class="class_select"
      clearable
    >
      <el-option
        v-for="item in scholarshiplist"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="semester"
      placeholder="请选择学期"
      class="class_select"
      clearable
    >
      <el-option
        v-for="item in semesterlist"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- <el-button type="primary" @click="apply_scholarship">申请奖学金</el-button> -->
    <el-tabs v-model="activeName" type="card" v-if="this.scholarship != ''">
      <el-tab-pane label="课程成绩" name="first">
        <!-- 人生，坎坷不尽人意，选择了努力就别放弃 -->
        <Grade @listen_grade="add_grade"></Grade>
      </el-tab-pane>
      <el-tab-pane label="品德行为" name="second">
        <!-- 级联选择器 -->
        <!-- <el-cascader v-model="fraction" :options="haveRankList" :props="props" clearable filterable></el-cascader> -->
        <Study
          type_id="1"
          :scholarship_id="this.scholarship"
          @listen_character="add_character"
        >
          <template v-slot:header>
            <h3>品德类</h3>
          </template>
        </Study>
      </el-tab-pane>
      <!-- 学业表现 -->
      <el-tab-pane label="学业表现" name="third">
        <Study
          type_id="2"
          :scholarship_id="this.scholarship"
          @listen_study="add_study"
        >
          <template v-slot:header>
            <h3>学业类</h3>
          </template>
        </Study>
      </el-tab-pane>
      <!-- 文体表现 -->
      <el-tab-pane label="文体表现" name="fourth">
        <Study
          type_id="3"
          :scholarship_id="this.scholarship"
          @listen_style="add_style"
        >
          <template v-slot:header>
            <h3>文体类</h3>
          </template>
        </Study>
      </el-tab-pane>
      <!-- 其它规则 -->
      <!-- <el-tab-pane label="其它规则" name="fifth">
        <p>是否存在挂科，若存在，请填写名称</p>
      </el-tab-pane> -->
      <el-tab-pane label="提交申请" name="six">
        <el-button
          style="margin-left: 10px;"
          type="primary"
          @click="submit_application"
          >提交</el-button
        >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { request } from "../request/http.js";
import qs from "qs";
import Study from "./common/study.vue";
import Grade from "./grade.vue";
export default {
  data() {
    return {
      activeName: "first",
      // 级联选择器
      props: {
        label: "name",
        value: "id",
        children: "additional_rank",
        expandTrigger: "hover",
      },
      fraction: "",
      scoring_details: {
        character: [],
        study: [],
        style: [],
      },
      scholarship: "",
      scholarshiplist: [],
      semester: "",
      semesterlist: [
        {
          name: "大一上期",
          value: "1",
        },
        {
          name: "大一下期",
          value: "2",
        },
        {
          name: "大二上期",
          value: "3",
        },
        {
          name: "大二下期",
          value: "4",
        },
        {
          name: "大三上期",
          value: "5",
        },
        {
          name: "大三下期",
          value: "6",
        },
        {
          name: "大四上期",
          value: "7",
        },
        {
          name: "大四下期",
          value: "8",
        },
      ],
    };
  },
  name: "SelectionRules",
  components: {
    Study,
    Grade,
  },
  props: ["scholarship_id"],
  created() {
    this.getRankList();
    this.get_all_scholarship();
  },
  computed: {
    ...mapState({
      username: (state) => state.name,
      roleid: (state) => state.role,
      userid: (state) => state.user_id,
      userinfo: (state) => state.userinfo,
    }),
  },
  methods: {
    getRankList() {
      request({
        url: "/score-rule/get-rank-list/",
      })
        .then((res) => {
          if (res.code == 200) {
            localStorage.setItem("rank_list", JSON.stringify(res.data));
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    add_grade(data) {
      this.scoring_details.grade_list = data;
    },
    add_character(data) {
      this.scoring_details.character = data;
    },
    add_study(data) {
      this.scoring_details.study = data;
    },
    add_style(data) {
      this.scoring_details.style = data;
    },
    submit_application() {
      if (this.semester == "") {
        this.$message.error("请先选择学期");
        return;
      }
      if (!this.scoring_details.grade_list) {
        this.$message.error("请先添加成绩");
        return;
      }
      request({
        url: "/score-rule/submit-application/",
        method: "post",
        data: qs.stringify({
          data: JSON.stringify(this.scoring_details),
          user_id: this.userid,
          semester: this.semester,
          scholarship_id: this.scholarship,
        }),
      })
        .then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
        })
        .catch((err) => {
          console.log("提交出错");
        });
    },
    get_all_scholarship() {
      request({
        url: "/score-rule/get-all-scholarship/",
      })
        .then((res) => {
          this.scholarshiplist = res.data;
        })
        .catch((err) => {
          this.$message.error("请求出错");
        });
    },
  },
};
</script>
